<template>
  <el-menu active-text-color="#409eff" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
    style="width: 200px" text-color="#fff" router>
    <div class="text">
      latuamodels
    </div>

    <el-menu-item index="/back/home">
      <el-icon>
        <Menu />
      </el-icon>
      <span>Home Settings</span>
    </el-menu-item>

    <el-menu-item index="/back/models">
      <el-icon><UserFilled /></el-icon>
      <span>All Models</span>
    </el-menu-item>
    
    <el-menu-item index="/back/about">
      <el-icon>
        <InfoFilled />
      </el-icon>
      <span>Contact Settings</span>
    </el-menu-item>

    <el-menu-item index="/back/profile">
      <el-icon>
        <User />
      </el-icon>
      <span>Personal</span>
    </el-menu-item>

    
  </el-menu>
</template>

<script lang="ts" setup>
import { Operation, User, Guide, Menu, Male, Female, InfoFilled, MessageBox, UserFilled } from "@element-plus/icons-vue";

</script>

<style scoped lang="scss">
.el-menu-vertical-demo {
  min-height: 100vh;
  height: 100%;
}

.text {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
}
</style>
